<template>
  <div class="remark">
    <!-- 标题 -->
    <van-nav-bar
      title="确认订单"
      left-arrow
      @click-left="$router.back()"
      class="navBar"
    />

    <!-- 快速备注 -->
    <van-panel title="快速备注:" class="fast">
      <div slot="default">
        <ul>
          <li v-for="(item1, index1) in remarks" :key="index1">
            <span
              :class="{ bg: item.selected }"
              v-for="(item, index) in item1"
              :key="index"
              @click="select(item, item1)"
              >{{ item.name }}</span
            >
          </li>
        </ul>
      </div>
    </van-panel>

    <!-- 其他备注 -->
    <van-panel title="其他备注:" class="other">
      <van-field
        v-model="message"
        rows="3"
        autosize
        type="textarea"
        placeholder="请输入留言"
      />
    </van-panel>

    <van-button type="primary" block @click="submit">确 定 </van-button>
  </div>
</template>

<script>
import { getRemarks } from '@/api/order'

export default {
  name: 'remark',
  data() {
    return {
      message: '',
      cart_id: this.$route.query.id,
      remarks: [],
      selected: ''
    }
  },
  methods: {
    // 选择备注
    select(item, list) {
      if (list.length > 1) {
        list.forEach(i => {
          if (item.name !== i.name) {
            i.selected = false
          }
        })
      }
      item.selected = !item.selected
    },
    // 获取全部备注
    async getRemarks() {
      const { data } = await getRemarks(this.cart_id)
      this.remarks = data.remarks.map(v => {
        return v.map(v2 => {
          return {
            name: v2,
            selected: false
          }
        })
      })
    },
    // 提交备注
   async submit(){
     await setTimeout(()=>{
      this.$bus.$emit('addRemark',this.checked)
      },100)
      this.$router.back()
      this.$toast.success('添加备注成功!')
    }
  },
  created() {
    this.getRemarks()
  },
  // 获取用户的备注
  computed: {
    checked() {
      let list = []
      this.remarks.forEach(item => {
        item.forEach(v => {
          if (v.selected) {
            list.push(v.name)
          }
        })
      })
      if (this.message) {
        list.push(this.message)
      }
      return list.join(',')
    }
  }
}
</script>

<style lang="less" scoped>
.remark {
  .bg {
    background-color: #3190e8;
    color: #fff;
  }
  padding-top: 46px;
  /deep/.navBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #4e7ee8;
    .van-nav-bar__title,
    .van-icon-user-o,
    .van-icon-arrow-left {
      font-size: 20px;
      color: #fff;
    }
  }
  .van-panel {
    margin: 10px 0;
    .van-cell__title {
      font-size: 16px;
    }
    .van-panel__content {
      padding: 0 15px;
      li {
        display: inline-block;
        border: 1px solid #3190e8;
        margin-right: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
        font-size: 14px;
        span {
          display: inline-block;
          padding: 7px 14px;
          border-left: 1px solid #3190e8;
        }
        span:first-child {
          border-left: 0;
        }
      }
      /deep/.van-field__body {
        margin: 10px 0;
        padding: 10px;
        background-color: #f9f9f9;
      }
    }
  }
  .van-button--primary {
    font-size: 20px;
  }
}
</style>
